import { FC } from 'react';
import { Card, Form, Input, Button, Space } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import type { TableConfig as TableConfigType } from '../../../types/report';
import styles from './TableConfig.module.css';

interface TableConfigProps {
  value: TableConfigType;
  onChange: (value: TableConfigType) => void;
  onDelete: () => void;
}

const TableConfig: FC<TableConfigProps> = ({
  value,
  onChange,
  onDelete
}) => {
  const handleAddColumn = () => {
    const newColumn = {
      title: '新列',
      dataIndex: `col_${Date.now()}`,
      key: Date.now().toString()
    };
    onChange({
      ...value,
      columns: [...value.columns, newColumn]
    });
  };

  return (
    <Card
      className={styles.tableConfig}
      title={
        <Input
          value={value.title}
          onChange={e => onChange({ ...value, title: e.target.value })}
          placeholder="表格标题"
          bordered={false}
        />
      }
      extra={
        <Button
          type="text"
          danger
          icon={<DeleteOutlined />}
          onClick={onDelete}
        />
      }
    >
      <Form layout="vertical">
        <Form.Item label="列配置">
          <Space direction="vertical" style={{ width: '100%' }}>
            {value.columns.map((column, index) => (
              <Input
                key={column.key}
                value={column.title}
                onChange={e => {
                  const newColumns = [...value.columns];
                  newColumns[index] = { ...column, title: e.target.value };
                  onChange({ ...value, columns: newColumns });
                }}
                placeholder="列标题"
              />
            ))}
            <Button
              type="dashed"
              icon={<PlusOutlined />}
              onClick={handleAddColumn}
              block
            >
              添加列
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default TableConfig; 